<template>
  <div>
    <div class="header">
      <van-sticky :offset-top="0">
        <van-nav-bar title="预约挂号" left-arrow @click-left="onClickLeft" />

        <!-- 搜索栏 -->
        <div class="nav">

          <!-- <van-dropdown-menu class="dropdown">
          <van-dropdown-item v-for="item in citys" v-model="item.provinces_id" :options:any="citys">{{ item.provinces_name }}</van-dropdown-item>
          </van-dropdown-menu> -->

          <!-- 选择省份 -->
          <van-field v-model="result" is-link readonly name="area" label="地区选择" placeholder="点击选择省市区"
            @click="showArea = true" />
          <van-popup v-model:show="showArea" position="bottom">
            <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
          </van-popup >
          <!-- <van-search class="search" placeholder="请输入搜索关键词" /> -->
        </div>
        <div class="kong"></div>
        <!-- <van-divider class="kong" /> -->

        <!-- 医院选择 area地区  grade医院等级 cSor 综合排序-->
        <van-dropdown-menu class="dropdown-to">
          <!-- <van-dropdown-item v-model="area" :options="areas" /> -->
          <van-dropdown-item v-model="grade" :options="grades" @change="TiJianSelect"/>
          <van-dropdown-item v-model="cSor" :options="cSors" />
        </van-dropdown-menu>
      </van-sticky>
    </div>


    <div class="null">
      <div class="content">
        <div class="hospital" v-for="item in hospital" :hospital="item" :data="{hospital}"
          @click="$router.push(`/yiyuankeshi/${item.h_id}`)">
          <div class="imgs">
            <img :src=item.h_cover alt="" />
          </div>
          <ul>
            <li class="yytitle">{{ item.h_name }}</li>
            <li>
              <sapn class="grade"><svg t="1677298593956" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2252" width="16" height="16">
                  <path d="M762 512L512 912 262 512l250-400z" p-id="2253" fill="#e6e6e6"></path>
                </svg>三甲</sapn>
            </li>
            <li><van-icon name="location" color="#000" /><span>地址</span></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import httpApi from "@/http";
import { ref, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import Hospital from "@/type/Hospital"
import City from "@/type/City"
import myaxios from "@/http/MyAxios";
import { areaList } from '@vant/area-data';
// import axios from "axios";



const router = useRouter

// 返回上级
const onClickLeft = () => history.back()

// 搜索地址
// 选择城市地址



// // 选择医院相关
// const area = ref(0)
// const areas = ref([
//   { text: "全部地区", value: 0 },
//   { text: "西南区", value: 1 },
//   { text: "渝北区", value: 2 },
//   { text: "江北区", value: 3 }
// ])

const grade = ref(0)
const grades = reactive<any>([
  { text: "全部医院", value: 0 },
  { text: "三甲", value: 1 },
  { text: "二甲", value: 2}
])
let i = [0,1,2]
console.log(grades[2].value,'22222')

const cSor = ref(0)
const cSors = ref([
  { text: "综合排序", value: 0 },
  { text: "距离优先", value: 1 },
  { text: "等级优先", value: 2 },
])

// 当用户点击的时候发生请求变化
const TiJianSelect =  function (){
  console.log(grades);
  // if(grades[1].value==1){
  //   console.log('拿值',grades[2].value)
  //     // let url = 'http://localhost:3010/hospital/asc'
  //      httpApi.HospitApi.asc().then(res=>{
  //     console.log('点击了二甲',res)
  //     return hospital.push(...res.data.data)
  //     // return 
  //     console.log(hospital)
  //   })
  // }
  // else {
  //   if(grades[2].value==2){
  //   httpApi.HospitApi.desc().then(res=>{
  //     console.log('点击了2甲',res)
  //   return   hospital.push(...res.data.data)
      
  //     console.log(hospital)
  //   })
  // }
  // }
}

// 页面挂载完毕后自动加载全部医院
const hospital = reactive<Hospital[]>([])
onMounted(() => {
  // console.log('onMounted...1')
  // 发送请求，加载数据  
  // let params = { page: 1, pagesize: 100 }
  httpApi.HospitalApi.queryAll().then(res => {
    // console.log(res,'000')
    hospital.push(...res.data.data.result)
  })
})

watch(grade,(newval,oldval)=>{
  console.log(newval,oldval)
// 清空第一次请求的数据

  if(newval==1){
    console.log('拿值',newval)
       httpApi.HospitalApi.asc().then(res=>{
      // console.log('点击了三甲',res)
      hospital.splice(0,hospital.length,...res.data.data)
      // console.log(hospital,'111')


    })
  }
  if(newval==2){
    httpApi.HospitalApi.desc().then(res=>{
      console.log('点击了2甲',res)
   hospital.splice(0,hospital.length,...res.data.data)
      
    })
  }
})


// 选择器
const result = ref('');
    const showArea = ref(false);
    const onConfirm = ({ selectedOptions }:any) => {
      showArea.value = false;
      result.value = selectedOptions.map((item:any) => item.text).join('/');
    }

// 查询所有城市
// 保存将服务端返回的数据经行处理之后的数据
let items: any;
// 保存请求到的地区数据
let location: any;
// 保存当前选中的地区数据
let xZlocation: any = '全部';
// 保存当前地区的id
let xZlocationID: any = ref([-1]);

onMounted(() => {
  // 发请求回去地区数据
  httpApi.examination.eLoactionProvincesAll().then(res => {
    // console.log("res:", res.data.data);
    location = res.data.data;
    items = location.map((item: { provinces_name: any; provinces_id: any; }) => {
      return {
        text: item.provinces_name,
        value: item.provinces_id,
      }
    });
    xZlocation = '全部';
  });
});



</script>

<style scoped>
:root:root {
  --van-gray-3: #fff;
}


.header {
  height: 112px;
  background-color: #fff;
}

/* 导航头部文字颜色 */
.van-nav-bar {
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-background: #4f87da;
  --van-nav-bar-arrow-size: 22px;
  --van-nav-bar-title-font-size: 22px;
}



.nav {
  padding: 10px 0;
  display: flex;
  background-color: #fff;
  /* flex: 1; */
}

.dropdown {
  margin: 0;
  width: 90px;
  --van-dropdown-menu-height: 40px;
  --van-dropdown-menu-shadow: 0 0;
  --van-dropdown-menu-title-text-color: #000;
  --van-dropdown-menu-title-font-size: 17px;
  font-weight: 600;
}


/* 组件搜索框 */
.search {
  border-style: none;
  flex: 1;
  height: 40px;
  margin-left: -15px;
  background-color: #fff;
  border: 2px solid #fff;
  box-shadow: none;
  border-style: none;
  --van-search-input-height: 44px;
}

.search-dq {
  font-size: 25px;
}

.kong {
  /* line-height: 5px; */
  /* --van-divider-border-color: ; */
  /* margin-top: 10px; */
  height: 5px;
  /* line-height: 20px; */

  /* margin: 0; */
  /* padding: 0; */
  /* --van-divider-margin: 0; */
  background: linear-gradient(to left,
      #d9f7e8,
      #d7f5e9,
      #f7fdfc,
      #e7f8f3,
      #fcfffd,
      #bdf0d4,
      #8fb8f5,
      #b9d4f5,
      #8fb8f5,
      #c0f0d8,
      #e9f0fb,
      #d3dbd5);
}

/* 三个下拉组件样式 */


/* 医院图片 */
.hospital {
  display: flex;
  height: 100px;
  margin: 0 15px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;

}

.hospital ul {
  height: 80px;
  font-size: 12px;
  padding-top: 8px;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* 医院标题 */
.yytitle {
  font-size: 15px;
  font-weight: 600;
}

.hospital>.imgs {
  width: 60px;
  height: 100px;
  padding-top: 15px;
}

.hospital img {
  width: 60px;
  height: 60px;
  /* margin-top: 23px; */
}


/* 等级 */
.grade {
  border-radius: 2px;
  padding: 4px 4px 4px 14px;
  color: #fff;
  background-color: #deb887;
  position: relative;
}

/* 三甲图标 */
.icon {
  position: absolute;
  top: 4px;
  left: -2px;
}

.null {
  margin-top: 30px;
  height: 100vh;
  background-color: #f6f6f6;
  padding: 15px 6px 0 6px;
}

.content {
  --van-dropdown-menu-shadow: 0 0;
  background-color: #fff;

}

.dropdown-to {
  /* border: 2px solid #fff; */
  position: relative;
  top: -2px;
  --van-dropdown-menu-shadow: 0 0;
  --van-dropdown-menu-title-font-size: 15px;
  --van-dropdown-menu-title-text-color: #b3b3b3;
  --van-dropdown-menu-option-active-color: #000;
  font-weight: 500;
}
</style>
